import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Modal, TextareaItem, Toast } from 'antd-mobile'
import api from '@UTILS/api'
import './index.less'


class CaptchModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      verifyKeyword: ''
    }
  }

  componentDidMount() {
    if(this.props.modal){
      api.getPicCode({
        success: (data)=> {
          // console.log(data)
        }
      })
    }
  }

  render() {
    return (
      <Modal
        transparent
        maskClosable={true}
        footer={[{ text: '取消', onPress: () => this.props.closeCaptchaView()}, { text: '确定', onPress: () => this.getUserInputCaptcha(this.state.verifyKeyword)}]}
        visible={this.props.modal}
      >
      <div className="CaptchaMo">
        <div className="CaptchaTitle">请输入图形验证码</div>
        <span>图形验证码：</span><img className="CaptchaPic" src={this.props.pic} alt=""/>
        <div style={{textAlign: 'center'}}>
          <TextareaItem 
            style={{border:'1px solid #dbdbdb', borderRadius: 5}}
            placeholder=""
            rows={1}
            value = {this.state.verifyKeyword}
            onChange = {value => this.setState({verifyKeyword: value})}
          />
        </div>
      </div>
      </Modal>
    )
  }
  getUserInputCaptcha(code) {
    if (code === "") {
      Toast.fail('请输入验证码', 1)
      return
    }
    this.props.getUserInputCaptcha(code)
  }
}

CaptchModal.propTypes = {
  modal: PropTypes.bool,
  pic: PropTypes.string
}

export default CaptchModal
